Hello and welcome to feet you in this field you.
We are going to create a directory for our product.
We will also create the patient email structure for the project.
I'm going to create the directory on my desktop by just right click in ongoing new folder.
And I just gave the falzone.
I'm just going to call it loan calculator so you can also grade their creed the same way if you are
using a Mac.
So that's my directory that I have corded loon calculator next in and want to do is create a hasty mail
structure for the project.
I am going to be using sublime text edit all to create a structure.
So this is the sublime text editor.
I am going to add hastier my code.
I have already pre staged it so I'll just add the code on panel and explain the code line by line.
So the first thing I'm going to do is name my file here.
I'm going to quote.
This is going to be in my head.
TMF Some calling it a loan late or.
This here mail and save it inside my territory which I have called loan calculator.
Want a quick c.
You can see here a display displays the name of the document here on the bottom right.
Also you can see his hastier mail or any chord I add in here will be hastier mail code.
I have added some basic structure to our hastier mail document.
I am just going to run through them with you.
Line one here is the doc type which basically is said declaration to the web browser.
Just to let them know that the type of document you display is his team a document here.
This is where the whole hastier mail document starts from doctype tells the browser.
This is a hastier Mail 5 document.
So from line 3 to a line 23 is what constitutes.
They had told hastier month document.
So we've got the head section inside the head.
So we called the Met up cast set.
This actually period basically refers to the Unicode the type of characters it all accept utf.
It is the standard character format used in the world and here on line 7.
I've got a link to the style --.
I'm going to be using an external style sheet which I will create later and I'm going to call it low
calculator.
Don't see.
So I have just added a title or logon calculator so the title is what will be displayed in the browser
window.
When the application runs.
Moving on to the body section here which this is the opening body tag and that's it close and tag the
body tag physically is where the content for the outroar application is rendered.
So any content you see within the body tag is what is going to be visible to the user.
So here I am God and I am going to wrap the content inside.
Hey Dave and I give giving the Deve an attribute of lone cow here.
Got an Hey one.
Tag.
This is a head tag that will display the title of the application.
We just see a lawn calculator in here in between.
After they grant Im going to add some paragraph the paragraph will serve as input fields for the various
parts of the lawn calculate.
And here are parts of a script.
This will be my javascript.
This is where I will add the logic or the function that would do the actual computing or collation of
Hello.
This is the name I am going to call it when I create the far far.
I have added some paragraph here had three paragraphs here that will be used as input field for us to
input the values that were use to calculate the load.
So here I am caught this will going to be the loan amount and is going to be in dollars of giving.
Puts an idea of the amount the time is going to be in number and the minimum is one maximum five million.
And here.
The on change event the on change event physically occurs when the value of one element has been changed.
So each time the values has been input it changes this on change event here will for this function which
is a computer launch function and to real collate and compute the new value based on the input that
has been entered.
So we'll be creating a function calls compute long later inside our javascript far.
Here we've got on another field here called interest rate and it's going to be in percent.
So this is where we'll put the interest rate and the type of giving it an idea of value of interest
and the score rate that type is going to be no minimum value is zero maximum is going to be great in
terms of interest rate.
I am going to start off with an initial value of 10 percent as the interest rate and then sort of core
here core.
Step step attribute basically is used to specify the legal number of intervals for an input elements
so this tip is basically specifying the legal number of intervals for the import element.
Normally you can use this with the maximum and minimum attributes you can see here.
Minimum attribute it maximum attribute.
Also again we are attaching the on change event so anytime there's value changes it all core base function
here called compute.
And for the other per grab we've got the monts to pay.
So this will be the value to be entered for the amount of month it will take to repay the loan.
So given this import an idea or month type it's going to be a no minimum at least one maximum value
is 300 months from an remands bisley you say equivalent to 25 years.
So we can change his value if you want to do that the value initial value of giving it to be one.
Again I'm using this step I attribute the value of last tip is one again just to re recreate that step
attribute is to specify the lingo the number of intervals for an import element.
Right.
Again here we're calling the change event so any time the Palouse changes it all true this function
here quad computer loan and it re compute the value is entered here.
We've called the haste to eliminate.
This is what will display the actual amount to be paid monthly so the amount you pay monthly will be
displayed inside this page to tag.
So all the values in going here are no are known as attributes the values in green are actually bits.
Our trip is basically provides additional information about hastier male element anywhere you've got
a value here add value attribute physically specifies the value of import elements whatever value you
enter.
This is what is going to capture the value.
So I'm just going to say this.
We've basically finished the structure we can run this inside our hate mail to see what it looks like.
Some just going to open up the directory and double click on this loan calculator.
Talk to hastier email.
You can see here.
This is the basic structure.
So this is exactly how I want the structure to look.
So in the next lecture we'll start doing the javascript part of it will create the logic that will make
all these work.
So that's it for this election.
Thanks for watching.
Bye for now.